<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>YUI Container - Tutorials (YUI Library)</title>

	<link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts-grids.css">

	<link rel="stylesheet" type="text/css" href="../../examples/assets/dpSyntaxHighlighter.css">
	<link type="text/css" rel="stylesheet" href="assets/style.css">
</head>

<body>

	<div id="doc3" class="yui-t5">
		<div id="hd">
			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
			<h1>YUI Container: Tutorials</h1>
		</div>

		<div id="bd">

					<div id="toc" class="yui-b">
			<ul>
				<li class="sect"><a href="#">YUI Container: Tutorials</a></li>

<li class="item"><a href="module/1.html">Module: Quickstart</a></li>
<li class="item"><a href="overlay/1.html">Overlay: Quickstart</a></li>
<li class="item"><a href="tooltip/1.html">Tooltip: Quickstart</a></li>
<li class="item"><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
<li class="item"><a href="panel/1.html">Panel: Quickstart</a></li>
<li class="item"><a href="skin/1.html">Panel: Skinning</a></li>
<li class="item"><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
<li class="item"><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
<li class="item"><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
<li class="item"><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
<li class="item"><a href="dialog/1.html">Dialog Quickstart</a></li>
<li class="item"><a href="simpledialog/1.html">SimpleDialog Quickstart</a></li>
<li class="item"><a href="effect/1.html">Using ContainerEffect</a></li>
<li class="item"><a href="overlaymanager/1.html">Using OverlayManager</a></li>
<li class="item"><a href="keylistener/1.html">Using KeyListener</a></li>
			</ul>
		</div>
			<div id="yui-main">
				<div class="yui-b">
					<h1 class="first">YUI Container Interactive Tutorials</h1>

					
			<p>The YUI Calendar Tutorials will provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.</p>


<div id="landing">
	<h3><a href="module/1.html">Module: Quickstart</a></h3>
	<p>Quickly get up and running with the most basic Modules.</p>

		<h3><a href="overlay/1.html">Overlay: Quickstart</a></h3>
	<p>Create an position a simple Overlay.</p>

		<h3><a href="tooltip/1.html">Tooltip: Quickstart</a></h3>
	<p>Create several Tooltips associated with different types of elements.</p>

		<h3><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></h3>
	<p>Get a significant performance boost by reusing one Tooltip for a large number of context elements.</p>

		<h3><a href="panel/1.html">Panel: Quickstart</a></h3>
	<p>Create and display a simple draggable content Panel.</p>

		<h3><a href="skin/1.html">Panel: Skinning</a></h3>
	<p>Learn how to use Panel's CSS hooks to customize its look and feel.</p>

		<h3><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></h3>
	<p>Modify the classic Panel using only CSS to give it a more OS-like look and feel.</p>

		<h3><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></h3>
	<p>Use Panel to temporarily display a message while a large block of content is loading asynchronously.</p>

		<h3><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></h3>
	<p>Build a subclass of Panel that acts as a simple photo slideshow with basic navigational features.</p>

		<h3><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></h3>
	<p>Build a subclass of Panel that adds a special resize handle to the footer for dynamically resizing the Panel using drag and drop.</p>

		<h3><a href="dialog/1.html">Dialog Quickstart</a></h3>
	<p>Create a basic Dialog and submit its form contents asynchronously.</p>

		<h3><a href="simpledialog/1.html">SimpleDialog Quickstart</a></h3>
	<p>Dynamically build a simple OK/Cancel dialog and react to the user's response.</p>

		<h3><a href="effect/1.html">Using ContainerEffect</a></h3>
	<p>Learn to use the 'effect' property in conjunction with the ContainerEffect class to animate your containers when they are shown and hidden.</p>

		<h3><a href="overlaymanager/1.html">Using OverlayManager</a></h3>
	<p>Use the OverlayManager to register a set of containers for focus tracking.</p>

		<h3><a href="keylistener/1.html">Using KeyListener</a></h3>
	<p>Configure the 'keylistener' property to allow containers to dynamically react to key press events.</p>

	</div>
					<div id="stepnav">
											</div>
				</div>
			</div>

		</div>

		<div id="ft">&nbsp;</div>
	</div>	

	<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript"> 
		dp.SyntaxHighlighter.HighlightAll('code'); 
	</script>

</body>
</html>